<template>
    <div class="main">
        <side-bar-menu side-bar-name="activity/catalog"></side-bar-menu>
        <head-nav-bar title-value="分类管理"></head-nav-bar>

        <div class="main-frame">
            <Button type="info" style="margin-bottom: 10px" @click="createCatalog">创建分类</Button>
            <Select v-model="activityId" @on-change="handleOptionChange" style="margin-bottom: 10px;width: 200px;"
                    placeholder="请选择活动名称筛选分类">
                <Option v-for="item in activityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>

            <Table :columns="tableColumns" :loading="tableLoading" :data="tableData"></Table>
        </div>
    </div>
</template>

<script>
    import SideBarMenu from '../components/SideBarMenu'
    import HeadNavBar from '../components/HeadNavBar'
    import CatalogCreate from './catalogManageCreate.vue'
    import util from '../../libs/util'

    export default {
        data() {
            return {
                tableColumns: [
                    {
                        title: '数据编号',
                        key: 'id'
                    },
                    {
                        title: '分类名称',
                        key: 'name'
                    },
                    {
                        title: '分类图片',
                        key: 'imgUrl',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            window.open(this.tableData[params.index].imgUrl)
                                        }
                                    }
                                }, '查看')
                            ]);
                        }
                    },
                    {
                        title: '所属活动',
                        key: 'activity',
                        filters: this.activityFilter,
                        filterMethod(value, row) {
                            return row.address.indexOf(value) > -1;
                        }
                    },
                    {
                        title: '操作',
                        key: 'op',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteCatalog(this.tableData[params.index].id)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                tableData: [],
                activityFilter: [],
                activityList: [],
                activityId: '',
                tableLoading: false,
                newCatalog: {}
            }
        },
        components: {
            SideBarMenu,
            HeadNavBar,
            CatalogCreate
        },
        methods: {
            deleteCatalog(id) {

                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确认删除该分类吗？</p>',
                    onOk: () => {
                        util.ajax({
                            url: '/admin/catalog/delete',
                            method: 'post',
                            params: {
                                catalogId: id
                            },
                        }).then(response => {

                            if (response.data.errorCode === 0) {

                                if (response.data.errorCode === 0) {
                                    this.tableData = this.tableData.filter(t => t.id !== id);
                                    this.$Message.success('删除成功');
                                } else {
                                    this.$Message.error(response.data.message);
                                }

                            }

                        }).catch(error => {//失败
                            console.log(error)
                        });
                    },
                    onCancel: () => {

                    }
                });


            },
            createCatalog() {
                this.$Modal.confirm({
                    okText: '创建',
                    onOk: () => {
                        util.ajax({
                            url: '/admin/catalog/create',
                            method: 'post',
                            params: {
                                name: this.newCatalog.name,
                                imgUrl: this.newCatalog.imgUrl,
                                activityModel: this.newCatalog.activityId
                            },
                        }).then(response => {

                            if (response.data.errorCode === 0) {
                                this.$Message.success('操作成功');
                            } else {
                                this.$Message.error(response.data.message);
                            }

                        }).catch(error => {
                            console.log(error);
                            this.$Message.error('网络错误!');
                        });
                    },
                    render: (h) => {
                        return h(CatalogCreate, {
                            props: {
                                catalog: this.newCatalog,
                                activityList: this.activityList
                            }
                        })
                    }
                })
            },
            handleOptionChange(value) {

                this.tableLoading = true;
                this.tableData = [];

                util.ajax({
                    url: '/admin/catalog',
                    method: 'get',
                    params: {
                        activityId: value
                    },
                }).then(response => {

                    this.tableLoading = false;

                    var data = response.data.data;

                    if (response.data.errorCode === 0) {

                        for (var i = 0; i < data.length; i++) {

                            var catalog = {
                                id: data[i].id,
                                name: data[i].name,
                                imgUrl: 'http://cdn.maxstudiozhuhai.com/' + data[i].imgUrl,
                                activity: data[i].activityModel.title
                            };

                            this.tableData.push(catalog);
                        }

                    }

                }).catch(error => {//失败
                    console.log(error)
                });


            },
            retrieveData() {
                util.ajax({
                    url: '/admin/activity/all',
                    method: 'get',
                    params: {},
                }).then(response => {

                    var data = response.data.data;

                    if (response.data.errorCode === 0) {

                        for (var i = 0; i < data.length; i++) {

                            var activityOption = {
                                value: data[i].id,
                                label: data[i].title
                            };

                            this.activityList.push(activityOption);
                        }

                    }

                }).catch(error => {//失败
                    console.log(error)
                });
            }
        },

        mounted() {
            this.retrieveData()
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>